/* eslint-disable react-hooks/exhaustive-deps */

import Layout from './Layout'
import { Form, Input, Button, Spin, Result } from 'antd';
import { useDispatch } from 'react-redux';
import { signup, signup_reset } from '../../store/actions/signup';
import { useSelector } from 'react-redux'
import { useEffect } from 'react'
import { Link } from 'react-router-dom';
function Signup() {
  const disptch = useDispatch()
  const { loading, loaded, success, message } = useSelector(state => state.signup)
  const handleInFinish = value => {
    disptch(signup(value))
  }
  // 显示正在注册
  const showLoading = () => {
    if (loading) return <Spin />
  }
  const [form] = Form.useForm()
  useEffect(() => {
    if (loaded && success) form.resetFields()
  }, [loaded, success])
  // 注册成功显示
  const showSuccess = () => {
    if (loaded && success) {
      return (
        <Result
          status="success"
          title="注册成功"
          extra={[
            <Button type="primary" key="console">
              <Link to="/signin">登录</Link>
            </Button>
          ]}
        />
      )
    }
  }
  // 注册失败显示
  const showError = ()=>{
    if(loaded && !success){
      return (
        <Result
          status="warning"
          title="注册失败"
          subTitle={message}
        />
      )
    }
  }
  // 显示表单
  const singupFrom = ()=>{
    return (
      <Form onFinish={handleInFinish} form={form}>
        <Form.Item name="name" label="昵称">
          <Input />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input.Password />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">注册</Button>
        </Form.Item>
      </Form>
    )
  }
  // 触发状态重置
  useEffect(()=>{
    return ()=>{
      disptch(signup_reset())
    }
  },[])
  return (
    <Layout title="注册" subTitle="" >
      {showLoading()}
      {showSuccess()}
      {showError()}
      {singupFrom()}
    </Layout>
  )
}

export default Signup